<template>
  <div class="blood-glucose-record">
    <!-- 患者信息 -->
    <div class="patient-info">
      <h2>北仑区人民医院重症医学科血糖记录单</h2>
      <div class="info-row">
        <span>床号：D3-06</span>
        <span>姓名：张赛英</span>
        <span>性别：女</span>
        <span>年龄：81岁</span>
        <span>住院号：2455865</span>
        <span>次数：{{ recordCount }}次</span>
      </div>
    </div>

    <!-- 血糖记录表格 -->
    <table class="glucose-table">
      <thead>
        <tr>
          <th colspan="3">第一组</th>
          <th colspan="3">第二组</th>
        </tr>
        <tr>
          <th>时间</th>
          <th>测定结果(mmol/L)</th>
          <th>测定者</th>
          <th>时间</th>
          <th>测定结果(mmol/L)</th>
          <th>测定者</th>
        </tr>
      </thead>
      <tbody>
        <!-- 每行显示两条记录 -->
        <tr v-for="(row, index) in pairedRecords" :key="index">
          <td>{{ formatTime(row[0]?.recTime) }}</td>
          <td>{{ row[0]?.propValue }}</td>
          <td>{{ row[0]?.createName }}</td>
          <td>{{ formatTime(row[1]?.recTime) }}</td>
          <td>{{ row[1]?.propValue }}</td>
          <td>{{ row[1]?.createName }}</td>
        </tr>
        <!-- 空白行补全 -->
        <tr v-for="i in blankRowCount" :key="'blank_'+i">
          <td></td><td></td><td></td>
          <td></td><td></td><td></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  props: {
    records: {
      type: Array,
      default: () => [
           {
        "id": "1950758208314277888",
        "createTime": "2025-07-31 11:19:35",
        "createdBy": "1696368802863775744",
        "updateTime": "2025-07-31 11:19:35",
        "updatedBy": "1696368802863775744",
        "updateName": "icu-001",
        "createName": "icu-001",
        "patientIdent": "3243218",
        "hospitalNumber": "2488139",
        "obsvId": null,
        "obsvCode": "gcx_blood",
        "propValue": "40",
        "recTime": "1753920000000",
        "isRange": null,
        "isDeleted": 0,
        "createSource": "hand",
        "diffHour": null,
        "diffSecond": null,
        "diffDay": null,
        "isNotRiseStr": null,
        "recTimeStr": null,
        "diffNoon": null,
        "chaV": "0",
        "caijiren": "icu-001",
        "caijirenGh": "icu-001",
        "isDaiji": null,
        "isVisible": 1,
        "isConfirmed": 1,
        "obsvType": null,
        "jsonText": ""
    },
    {
        "id": "1950845652548190208",
        "createTime": "2025-07-31 17:07:03",
        "createdBy": "1696368802863775744",
        "updateTime": "2025-07-31 17:07:03",
        "updatedBy": "1696368802863775744",
        "updateName": "icu-001",
        "createName": "icu-001",
        "patientIdent": "3243218",
        "hospitalNumber": "2488139",
        "obsvId": null,
        "obsvCode": "gcx_blood",
        "propValue": "100",
        "recTime": "1753948800000",
        "isRange": null,
        "isDeleted": 0,
        "createSource": "hand",
        "diffHour": null,
        "diffSecond": null,
        "diffDay": null,
        "isNotRiseStr": null,
        "recTimeStr": null,
        "diffNoon": null,
        "chaV": "0",
        "caijiren": "icu-001",
        "caijirenGh": "icu-001",
        "isDaiji": null,
        "isVisible": 1,
        "isConfirmed": 1,
        "obsvType": null,
        "jsonText": ""
    },

      {
        "id": "1950845652548190208",
        "createTime": "2025-07-31 17:07:03",
        "createdBy": "1696368802863775744",
        "updateTime": "2025-07-31 17:07:03",
        "updatedBy": "1696368802863775744",
        "updateName": "icu-001",
        "createName": "icu-001",
        "patientIdent": "3243218",
        "hospitalNumber": "2488139",
        "obsvId": null,
        "obsvCode": "gcx_blood",
        "propValue": "56",
        "recTime": "1753948800000",
        "isRange": null,
        "isDeleted": 0,
        "createSource": "hand",
        "diffHour": null,
        "diffSecond": null,
        "diffDay": null,
        "isNotRiseStr": null,
        "recTimeStr": null,
        "diffNoon": null,
        "chaV": "0",
        "caijiren": "icu-001",
        "caijirenGh": "icu-001",
        "isDaiji": null,
        "isVisible": 1,
        "isConfirmed": 1,
        "obsvType": null,
        "jsonText": ""
    },
      ]
    }
  },
  setup(props) {
    // 将记录两两配对
    const pairedRecords = computed(() => {
      const result = []
      for (let i = 0; i < props.records.length; i += 2) {
        result.push([props.records[i], props.records[i + 1]])
      }
      return result
    })

    // 计算空白行数量（保持总行数为6的倍数）
    const blankRowCount = computed(() => {
      const filledRows = Math.ceil(props.records.length / 2)
      return Math.max(0, 6 - (filledRows % 6))
    })

    // 记录次数
    const recordCount = computed(() => props.records.length)

    // 时间格式化
    const formatTime = (timestamp) => {
      if (!timestamp) return ''
      const date = new Date(Number(timestamp))
      return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
    }

    return {
      pairedRecords,
      blankRowCount,
      recordCount,
      formatTime
    }
  }
}
</script>

<style scoped>
.blood-glucose-record {
  font-family: "SimSun", "宋体", serif;
  width: 210mm; /* A4宽度 */
  margin: 0 auto;
  padding: 10mm;
}

.patient-info {
  margin-bottom: 15px;
}

.patient-info h2 {
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.glucose-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
  font-size: 14px;
}

.glucose-table th,
.glucose-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

.glucose-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 打印优化 */
@media print {
  .blood-glucose-record {
    padding: 0;
  }
  
  .glucose-table {
    page-break-inside: avoid;
  }
}
</style>